import React, {Component} from 'react';
import {StyleSheet, Text, View, ScrollView} from 'react-native';
// import Fetching from 'react-async-fetching';
import Fetching from './Fetching';
import Loading from './Loading';
import Error from './Error';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
function delay(time = 1000) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, time);
  });
}

Fetching.defaultProps = {
  loading: <Loading />,
  error: props => <Error {...props} />,
};

import firebase from 'react-native-firebase';
export default class Home extends Component {
  async fetch() {
    await delay(1000);
    // throw 'ERROR: XXX';
    // return React.createElement((await import('./Error')).default, {
    //   error: 'xxx',
    // });
    return [{a: 'A'}];
  }
  state = {
    data: 'BBBB',
  };

  async checkPermission() {
    const enabled = await firebase.messaging().hasPermission();
    if (enabled) {
      this.getToken();
    } else {
      this.requestPermission();
    }
  }

  //3
  async getToken() {
    let fcmToken = await firebase.messaging().getToken();
    // alert(fcmToken);
  }

  //2
  async requestPermission() {
    try {
      await firebase.messaging().requestPermission();
      // User has authorised
      this.getToken();
    } catch (error) {
      // User has rejected permissions
      console.log('permission rejected');
    }
  }
  async componentDidMount() {
    // await this.checkPermission();
    // firebase.notifications().onNotification(notification => {
    //   const {title, body} = notification;
    //   alert(title);
    //   try {
    //     notification.android.setChannelId('TEST');
    //     // notification.android.setChannelId(
    //     //   notification.data.channelId || 'UNKNOW',
    //     // );
    //     notification.setTitle(title || 'AppName');
    //     firebase.notifications().displayNotification(notification);
    //   } catch (error) {
    //     alert(error);
    //   }
    // });
  }
  render() {
    return (
      <Fetching fetch={this.fetch}>
        {({data, loading, error}) => {
          return (
            <ScrollView
              contentInsetAdjustmentBehavior="automatic"
              style={styles.scrollView}>
              <Header />
              {global.HermesInternal == null ? null : (
                <View style={styles.engine}>
                  <Text style={styles.footer}>Engine: Hermes</Text>
                </View>
              )}
              <View style={styles.body}>
                <View style={styles.sectionContainer}>
                  <Text style={styles.sectionTitle}>Step One</Text>
                  <Text style={styles.sectionDescription}>
                    Edit <Text style={styles.highlight}>App.js</Text> to change
                    this screen and then come back to see your edits.
                  </Text>
                </View>
                <View style={styles.sectionContainer}>
                  <Text style={styles.sectionTitle}>See Your Changes</Text>
                  <Text style={styles.sectionDescription}>
                    <ReloadInstructions />
                  </Text>
                </View>
                <View style={styles.sectionContainer}>
                  <Text style={styles.sectionTitle}>Debug</Text>
                  <Text style={styles.sectionDescription}>
                    <DebugInstructions />
                  </Text>
                </View>
                <View style={styles.sectionContainer}>
                  <Text style={styles.sectionTitle}>Learn More</Text>
                  <Text style={styles.sectionDescription}>
                    Read the docs to discover what to do next:
                  </Text>
                </View>
                <LearnMoreLinks />
              </View>
            </ScrollView>
          );
        }}
      </Fetching>
    );
  }
}
const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});
